<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>昭昭 - 今天吃什么选择</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
    <script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        *{font-family: "Microsoft YaHei"}
        body{width: 100%; height: 100%; overflow: hidden;}
        button{outline: none !important;}
        .span{display: block; opacity: 0; position: absolute; cursor: default; }
        #title{color: #bbb; text-align: center; margin-bottom: 30px; cursor: default; background-color: rgba(255, 255, 255, .5)}
        #order{text-align: center; margin-bottom: 30px; font-size: 26px; cursor: default; background-color: rgba(255, 255, 255, .5)}
        #btn{width: 150px;margin: 40px auto; display: table;}

        #setting{ position: fixed; bottom: 20px; right: 20px; z-index: 999; }
    </style>
</head>
<body>
<div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4" style="z-index: 999">
        <h2 id="title">帮我选</h2>
        <div id="order" class="text-primary">&nbsp;</div>
        <button id="btn" type="button" class="btn btn-default btn-lg">开始</button>
    </div>
    <div class="col-xs-4"></div>
</div>

<!--设置框-->
<button id="setting" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
    <span class="glyphicon glyphicon-cog"></span>
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">菜名设置</h4>
            </div>
            <div class="modal-body">
                <textarea rows="20" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>

    /**
     * 取范围随机数
     * @param min
     * @param max
     * @returns {Number}
     */
    function rand(min, max){
        return parseInt(Math.random() * (max - min + 1) + min);
    }

    // 菜单
    menu = [];
    /**
     * 读取菜单
     */
    function read_menu(){
        if(localStorage){
            var m = localStorage.chishenme_menu;
            if(m == null){
                menu = ["手抓饼","鸭血粉丝","拌面","拉面","炒粉","奶茶","吃暮暮","不吃了","汉堡","煎包","生煎","凉皮"];
            } else {
                menu = JSON.parse(m);
            }
        } else {
            menu = ["暮暮"];
        }
    }

    animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    handle = null; // 随机菜色计时器
    $(function(){
        body = $('body');
        width = $(window).width();
        height = $(window).height();
        order = $('#order');
        btn = $('#btn');
        textarea = $('textarea');

        // 上下居中
        $('#title').css('margin-top', height/2-150);

        read_menu();

        // 随机背景
        setInterval(function(){
            var i = Math.floor(Math.random() * menu.length + 1)-1;
            $('<span class="span">'+menu[i]+'</span>')
                    .css({"top":rand(0, height), "left":rand(0, width), "font-size":rand(20, 40)})
                    .css('color', 'rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.'+rand(3,9)+')')
                    .appendTo(body)
                    .addClass('animated fadeIn')
                    .one(animationEnd, function(){
                $(this).removeClass('fadeIn').addClass('fadeOut').one(animationEnd, function(){
                    $(this).remove();
                });
            });
        }, 100);

        // 按钮事件
        btn.on('click', function(){
            if(handle == null){
                btn.text('停止');
                handle = setInterval(function(){
                    var i = Math.floor(Math.random() * menu.length + 1)-1;
                    order.text(menu[i]);
                }, 50);
            } else {
                btn.text('开始');
                clearInterval(handle);
                handle = null;
            }
        });

        // 菜名设置
        for(var i in menu){
            textarea.html(textarea.html()+menu[i]+"\n");
        }

        // 保存事件
        $('#save').on('click', function(){
        	if(localStorage){
	            var text = textarea.val().split("\n");
	            // 去除空菜名
	            var cai = [];
	            for(var i in text){
	                if(text[i] != ''){
	                    cai.push(text[i]);
	                }
	            }
	            localStorage.chishenme_menu = JSON.stringify(cai);
	            read_menu();
            } else {
            	alert('你的浏览器不支持localStorage，无法保存菜单！');
            }
            $('#myModal').modal('hide');
        });
    });
</script>